import * as React from 'react';
import { observer } from 'mobx-react';
import { IBookListProps } from '../stores'
import AddBook from './AddBook'
import { List } from 'antd';
import BookModel from '../models/BookModel'
import BookItem from './BookItem'

@observer
export default class BookList extends React.Component<IBookListProps> {
  public render() {
    const bookStore = this.props.bookStore;
    /* tslint:disable:jsx-key */
    return (
      <div>
        <List
          header={<div>图书列表</div>}
          footer={<AddBook bookStore={bookStore} />}
          bordered={true}
          dataSource={bookStore.filterBooks}
          renderItem={(book: BookModel) => <BookItem bookStore={bookStore} book={book} />}
        />

      </div>
    );
  }
}
